/**
 * 文章推荐组件
 * @returns
 */
import { ArrowRightOutlined } from '@ant-design/icons';
import { useState } from 'react';
import { Link } from 'react-router-dom';

interface ArticleItem {
  id: number;
  title: string;
  author: string;
  date: string;
  description: string;
  imageUrl: string;
}

const ArticleRecommend = () => {
  const [featuredArticle] = useState<ArticleItem>({
    id: 1,
    title: '野生菌的食用与鉴别方法',
    author: '菌类专家',
    date: '2023-05-15',
    description:
      '野生菌资源丰富，但如何安全食用成为关键问题。本文详细介绍了常见野生菌的鉴别方法、食用禁忌、烹饪技巧，以及毒蘑菇的辨别方法，帮助读者安全享用野生菌带来的美味体验。',
    imageUrl:
      'http://5b0988e595225.cdn.sohucs.com/images/20190806/93de25fd70744599b797bd9a21a1a43d.jpeg',
  });

  const [articleList] = useState<ArticleItem[]>([
    {
      id: 2,
      title: '云南野生菌的收获季节',
      author: '野外探索者',
      date: '2023-06-20',
      description: '每年6-9月是云南野生菌的黄金收获期',
      imageUrl: 'https://inews.gtimg.com/om_bt/GBHENum5R1UNyqlOnPDlxhLqIPR7fveOMdXDwhmMtrSToAA/0',
    },
    {
      id: 4,
      title: '如何辨别野生羊肚菌和人工种植羊肚菌的区别',
      author: '食用菌研究员',
      date: '2023-07-05',
      description: '从形态与口感分辨真假野生菌',
      imageUrl: 'https://www.meishiu.com/uploads/202302/02/230202035833447.jpg',
    },
    {
      id: 5,
      title: '野生菌的药用价值研究',
      author: '中医药学者',
      date: '2023-08-11',
      description:
        '通过近年来对野生菌中化学成分研究进展及野生菌提取物开发产品的案例分析，阐明重视对有毒野生菌研究开发的必要性，并提出下一步研究的展望',
      imageUrl: 'https://thaka.bing.com/th/id/OIP.WnIMphtH21hT7mCbZABlDwAAAA?rs=1&pid=ImgDetMain',
    },
    {
      id: 6,
      title: '云南野生食用菌产业发展任重而道远',
      author: '产业分析师',
      date: '2022-08-09',
      description:
        '云南独特的气候及物种多样性，孕育了丰富的野生食用菌，其资源种类和生物量居全国之首。',
      imageUrl: 'https://society.yunnan.cn/pic/003/049/132/00304913233_d8b284af.png',
    },
  ]);

  return (
    <div className="w-full bg-white dark:bg-white rounded-lg shadow-[0_0_10px_rgba(0,0,0,0.1)] p-6 mt-8">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-bold text-emerald-700 dark:text-emerald-700 mb-2">文章推荐</h1>
        <Link to="/categories">
          <span className="text-emerald-700">查看更多</span>
          <ArrowRightOutlined className="!text-emerald-700" />
        </Link>
      </div>
      <div className="w-full bg-white dark:bg-white rounded-lg shadow-lg p-6">
        <div className="flex gap-8">
          {/* 左侧推荐详情 */}
          <div className="w-1/3 border-r border-gray-200 dark:border-gray-200 pr-6">
            <div className="featured-article">
              <div className="text-2xl font-bold text-emerald-700 dark:text-emerald-700 mb-2">
                {featuredArticle.title}
              </div>
              <div className="flex justify-between text-gray-600 dark:text-gray-600 mb-2">
                <span>作者：{featuredArticle.author}</span>
                <span>{featuredArticle.date}</span>
              </div>
              <div className="relative h-[200px] mb-4 overflow-hidden rounded-lg">
                <img
                  src={featuredArticle.imageUrl}
                  alt={featuredArticle.title}
                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                />
              </div>
              <p className="text-gray-700 dark:text-gray-700 leading-relaxed mb-2">
                {featuredArticle.description}
              </p>
              <Link
                to={`/categories/17`}
                className="inline-block mt-3 text-emerald-600 dark:text-emerald-600 hover:text-emerald-800 dark:hover:text-emerald-800"
              >
                阅读全文 &rarr;
              </Link>
            </div>
          </div>

          {/* 右侧推荐列表 */}
          <div className="w-2/3">
            <div className="grid grid-cols-2 gap-6">
              {articleList.map((article) => (
                <Link
                  key={article.id}
                  to={`/categories/${article.id}`}
                  className="block group"
                >
                  <div className="border border-gray-200 dark:border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-300 bg-white dark:bg-white">
                    <div className="relative h-[140px] mb-3 overflow-hidden rounded-lg">
                      <img
                        src={article.imageUrl}
                        alt={article.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                    </div>
                    <h3 className="text-lg font-semibold text-emerald-700 dark:text-emerald-700 mb-1">
                      {article.title}
                    </h3>
                    <div className="flex justify-between text-sm text-gray-600 dark:text-gray-600 mb-2">
                      <span>{article.author}</span>
                      <span>{article.date}</span>
                    </div>
                    <p className="text-gray-700 dark:text-gray-700 text-sm line-clamp-2">
                      {article.description}
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArticleRecommend;
